<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.div1{
			width: 100px;
			height: 100px;
			background-color: #008000;
			/* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数  是否反方向; */
			/* 是否反方向：normal | reverse | alternate | alternate-reverse */
			animation: go 2s ease-in 0s infinite alternate-reverse;
		}
		@keyframes go{
			from{ /*0%*/
				transform: translateX(0px);
			}
			to{ /*100%*/
				transform: translateX(200px);
			}
		}
		
		.div2{
			width: 100px;
			height: 100px;
			background-color: gold;
			animation: around 2s infinite;
			perspective: 300px;
		}
		@keyframes around{
			0%{
				transform: translate(0,0);
			25%{
				transform: translate(300px,0);
			}
			50%{
				transform: translate(300px, 300px);
			}
			75%{
				transform: translate(0px, 300px);
			}
			100%{
				transform: translate(0px, 0px);
			}
		}
		@keyframes around3d{
			0%{
				transform: translate3d(0,0,0px);
			}
			25%{
				transform: translate3d(0px,0,200px);
			}
			50%{
				transform: translate3d(0px, 0px,200px);
			}
			75%{
				transform: translate3d(0px, 0px,200px);
			}
			100%{
				transform: translate3d(0px, 0px,0px);
			}
		}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<br>
		<div class="div2"></div>
	</body>
</html>
